<form nz-form [formGroup]="formModel">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="type == 1">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" [dateFormat]="'yyyy-MM-dd'"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="type == 1">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" [dateFormat]="'yyyy-MM-dd'"
                              (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"  *ngIf="type ==2">
      <nz-form-item>
        <nz-form-label  [nzSpan]="8">开始月份</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-month-picker
            style="width: 100%"
            [(ngModel)]="startDateTime"
            [ngModelOptions]="{standalone: true}"
            (ngModelChange)="onStartMonth($event)"
            nzPlaceHolder="选择日期"
            nzFormat="yyyy-MM">
          </nz-month-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6"  *ngIf="type == 2">
      <nz-form-item>
        <nz-form-label  [nzSpan]="8">结束月份</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-month-picker
            style="width: 100%"
            [(ngModel)]="endDateTime"
            [ngModelOptions]="{standalone: true}"
            (ngModelChange)="onEndMonth($event)"
            nzPlaceHolder="选择日期"
            nzFormat="yyyy-MM">
          </nz-month-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select
            nzMode="multiple"
            nzPlaceHolder="请选择场地"
            formControlName="merchantStoreIdArray"
            [nzOptions]="merchantStoreList"
          ></nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">二级类型</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择二级类型" formControlName="secondaryType">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="换货出库单" nzValue="1"></nz-option>
              <nz-option nzLabel="销售出库单" nzValue="2"></nz-option>
              <nz-option nzLabel="手动出库单" nzValue="3"></nz-option>
              <nz-option nzLabel="兑换出库单" nzValue="4"></nz-option>
              <nz-option nzLabel="撤销回收出库单" nzValue="5"></nz-option>
              <nz-option nzLabel="出礼出库单" nzValue="6"></nz-option>
              <nz-option nzLabel="盘亏出库单" nzValue="7"></nz-option>
              <nz-option nzLabel="调拨出库单" nzValue="8"></nz-option>
              <nz-option nzLabel="退还出库单" nzValue="9"></nz-option>
              <nz-option nzLabel="售货机销售出库单" nzValue="10"></nz-option>
              <nz-option nzLabel="售货机手动清货单" nzValue="11"></nz-option>

              <nz-option nzLabel="进货入库单" nzValue="21"></nz-option>
              <nz-option nzLabel="换货入库单" nzValue="22"></nz-option>
              <nz-option nzLabel="盘盈入库单" nzValue="23"></nz-option>
              <nz-option nzLabel="退货入库单" nzValue="24"></nz-option>
              <nz-option nzLabel="回收入库单" nzValue="25"></nz-option>
              <nz-option nzLabel="兑换入库单" nzValue="26"></nz-option>
              <nz-option nzLabel="调拨入库单" nzValue="27"></nz-option>
              <nz-option nzLabel="售货机入库单" nzValue="28"></nz-option>

              <nz-option nzLabel="盘点单" nzValue="41"></nz-option>
              <nz-option nzLabel="兑换退货单" nzValue="42"></nz-option>
              <nz-option nzLabel="调拨单" nzValue="43"></nz-option>
              <nz-option nzLabel="备货单" nzValue="44"></nz-option>
              <nz-option nzLabel="售货机货道容量修改单" nzValue="51"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">分组</nz-form-label>
          <nz-form-control [nzSpan]="16" nzErrorTip="请选择分组">
            <nz-select
              nzMode="multiple"
              nzPlaceHolder="请选择分组"
              formControlName="groupTypeIdArray"
              [nzOptions]="groupTypeList"
            ></nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">排序</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择排序" formControlName="orderId">
              <nz-option nzLabel="总数量降序" nzValue="1"></nz-option>
              <nz-option nzLabel="总数量升序" nzValue="2"></nz-option>
              <nz-option nzLabel="总利润降序" nzValue="3"></nz-option>
              <nz-option nzLabel="总利润升序" nzValue="4"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">商品名称</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入商品名称">
          <input type="text" id="commodityName" nz-input formControlName="commodityName" placeholder="请输入商品名称"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom" [ngClass]="isMobile? '': 'padding-left'" >
      <button (click)="submitForm()" *ngIf="!isMobile" nz-button nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="submitForm()" *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
      <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
      </button>
    </div>
  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="margin-bottom" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
      <button class="margin-right" (click)="dayMethod()" nz-button [nzType]="day">
        <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
        <span *ngIf="!isMobile">日交易数据</span>
      </button>

      <button nz-button [nzType]="month" (click)="monthMethod()">
        <i nz-icon nzType="rise" nzTheme="outline"></i><span *ngIf="!isMobile">月交易数据</span>
      </button>
    </div>
    <div class="statis">
      <span class="item">
        总利润：<span class="text-red">{{commodityStockRecord?.totalProfit | number:'0.2-2'}}</span>
      </span>
      <span class="item">
        总金额： <span class="text-red">{{commodityStockRecord?.totalRetailPrice | number:'0.2-2'}}</span>
      </span>
      <span class="item">
        总成本：<span class="text-red">{{commodityStockRecord?.totalCostPrice | number:'0.2-2'}}</span>
      </span>
      <span class="item">
        总数量：<span class="text-red">{{commodityStockRecord?.totalQuantity}}</span>
      </span>
    </div>
    <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
              [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
              (nzPageIndexChange)="nzPageIndexChange($event)"
              [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
              [nzScroll]="{ x: 'auto' }"
              nzShowSizeChanger [nzPageSizeOptions]="pageHelper.pageSizeOptions"
              (nzPageSizeChange)="onPageSizeChange($event)">
      <thead>
      <tr>
        <th>编号</th>
        <th>商品ID</th>
        <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">运营商</th>
        <th>场地</th>
        <th>设备</th>
        <th>商品名称</th>
        <th>总数量</th>
        <th>总金额</th>
        <th>总成本</th>
        <th>总利润</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let data of nzTable.data;let i = index;">
        <tr>
          <td nzEllipsis>{{i + 1}}</td>
          <td nzEllipsis>{{data.commodityId}}</td>
          <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">{{data.name}}</td>
          <td nzEllipsis>{{data.storeName}}</td>
          <td nzEllipsis>{{data.deviceNo}}</td>
          <td nzEllipsis>{{data.commodityName}}</td>
          <td nzEllipsis>{{data.totalQuantity}}</td>
          <td nzEllipsis>{{data.totalRetailPrice | emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{data.totalCostPrice | emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{data.totalProfit | emptyCheckPipe:2}}</td>
<!--          <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>-->
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
</div>
